<style scoped>

</style>
<template>
  <table class="table">
    <tbody>
    <template v-for="item in list">
      <tr v-if="!item.parentId" @click.stop="open(item.id)">
        <td><span v-if="parentId&&parentId==item.id" style="cursor: pointer">-</span><span v-else  style="cursor: pointer">+</span></td>
        <td></td>
        <td>{{item.name}}</td>
      </tr>
      <template  v-for="item1 in list1" v-if="parentId&&item.id==parentId">
        <tr @click.stop="opens(item1.id)">
          <td></td>
          <td><span v-if="parentIds&&parentIds==item1.id" style="cursor: pointer">-</span><span v-else style="cursor: pointer">+</span></td>
          <td>{{item1.name}}</td>
        </tr>
        <template v-for="item2 in list2" v-if="parentId&&parentIds&&item.id==parentId&&item1.id==parentIds">
          <tr>
            <td></td>
            <td></td>
            <td>{{item2.name}}</td>
          </tr>
        </template>
      </template>
    </template>
    </tbody>
  </table>
</template>

<script>

export default {
  components: {

  },

  props: [
    'data'
  ],

  data () {
    return {
      list:[],
      parentId:'',
      parentIds:'',
      listType:true,
      list1:[],
      list2:[]
    }
  },
  mounted () {
    this.getMenu()
  },
  methods: {
    open (id) {
      this.list1 = this.list.filter(function(data){
        if(data.parentId == id){
          return data
        }
      })
      this.parentId = id
      this.parentIds = ''
      this.list2 = []
    },
    opens (id) {
      this.list2 = this.list.filter(function(data){
        if(data.parentId == id){
          return data
        }
      })
      this.parentIds = id
    },
    getMenu () {
      let vm = this
      this.$http.get('menu/api/items?page=0&size=1000',{}).then(function(res){
        vm.list = res.data
      })
    },
  }
}
</script>
